<template>
  <div class="page">
    <div ref="screenRef" class="screen">
      <div class="screen-head">{{ SCREEN_TITLE }}</div>
      <div class="screen-content">
        <div class="content-top">
            <content-item></content-item>
        </div>
        <div class="content-center">
            <content-item></content-item>
        </div>
        <div class="content-bottom">
            <content-item></content-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue";
import ContentItem from "./components/ContentItem.vue";

//大屏标题
const SCREEN_TITLE = "示例大屏";

const screenRef = ref(null);


onMounted(() => {
  initScreenContainer();
});

const initScreenContainer = () => {
  screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
  window.onresize = () => {
    screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
  };
};
function get_screen_scale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}
</script>
<style lang='scss' scoped>
.page {
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -2;
}
.page .screen {
  width: 1920px;
  height: 1080px;
  position: fixed;
  background: url("../../../assets/images/screen_bg.png") no-repeat;
  background-size: cover;
  transform-origin: left top;
  left: 50%;
  top: 50%;
  z-index: 0;
}
.screen-head {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 8px;
}
.screen-content{
    width: 100%;
    height:calc(100% - 100px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .content-top{
        flex:1;
        margin: 10px 0;
    }

    .content-center{
        flex:1;
        margin: 10px 0;
    }

    .content-bottom{
        flex:1;
        margin: 10px 0;
    }
}
</style>